// 登录校验
checkLogin()

// 渲染用户名
renderUsername()

// 退出登录
registerLogout()


async function getData() {
  const res = await axios.get('/students')
  const html = res.data.map(v => {
    const { name, age, gender, group, hope_salary, salary, province, city, area, id } = v
    return `
      <tr>
        <td>${name}</td>
        <td>${age}</td>
        <td>${gender === 0 ? '男' : '女'}</td>
        <td>第${group}组</td>
        <td>${hope_salary}</td>
        <td>${salary}</td>
        <td>${province + city + area}</td>
        <td data-id="${id}">
          <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
          <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
        </td>
      </tr>
    `
  }).join('')
  document.querySelector('.list').innerHTML = html
  document.querySelector('.total').innerText = res.data.length
}

getData()

const modalDom = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalDom)

document.querySelector('#openModal').addEventListener('click', () => {
  document.querySelector('.modal-title').innerText = '添加学员'
  document.querySelector('#form').reset()
  citySelect.innerHTML = '<option value="">--城市--</option>'
  areaSelect.innerHTML = '<option value="">--地区--</option>'
  modalDom.dataset.id = ''
  modal.show()
})

const proSelect = document.querySelector('[name=province]')
const citySelect = document.querySelector('[name=city]')
const areaSelect = document.querySelector('[name=area]')

async function initSelect() {
  const proRes = await axios.get('/api/province')
  const proHtml = proRes.list.map(v => {
    return `<option value="${v}">${v}</option>`
  }).join('')
  proSelect.innerHTML = `<option value="">--省份--</option>${proHtml}`
  proSelect.addEventListener('change', async () => {
    const cityRes = await axios.get('/api/city', {
      params: {
        pname: proSelect.value
      }
    })
    const cityHtml = cityRes.list.map(v => {
      return `<option value="${v}">${v}</option>`
    }).join('')
    citySelect.innerHTML = `<option value="">--城市--</option>${cityHtml}`
    areaSelect.innerHTML = `<option value="">--地区--</option>`
  })
  citySelect.addEventListener('change', async () => {
    const areaRes = await axios.get('/api/area', {
      params: {
        pname: proSelect.value,
        cname: citySelect.value
      }
    })
    const areaHtml = areaRes.list.map(v => {
      return `<option value="${v}">${v}</option>`
    }).join('')
    areaSelect.innerHTML = `<option value="">--地区--</option>${areaHtml}`
  })
}

initSelect()

document.querySelector('#submit').addEventListener('click', () => {
  if (modalDom.dataset.id) {
    saveEdit()
  } else {
    addStudent()
  }
})
async function addStudent() {
  const form = document.querySelector('#form')
  const data = serialize(form, { hash: true, empty: true })
  data.age = +data.age
  data.gender = +data.gender
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary
  data.group = +data.group
  try {
    const res = await axios.post('/students', data)
    showToast(res.message)
    modal.hide()
    getData()
  } catch (error) {
    showToast(error.response.data.message)
  }
  modal.hide()
}

document.querySelector('.list').addEventListener('click', async (e) => {
  if (e.target.classList.contains('bi-trash')) {
    const id = e.target.parentNode.parentNode.dataset.id
    delStudent(id)
  }
  if (e.target.classList.contains('bi-pen')) {
    const id = e.target.parentNode.parentNode.dataset.id
    editStudent(id)
  }
})

async function delStudent(id) {
  await axios.delete(`/students/${id}`)
  getData()
}

async function editStudent(id) {
  const res = await axios.get(`/students/${id}`)
  document.querySelector('.modal-title').innerText = '修改学员'
  const keyArr = ['name', 'age', 'group', 'hope_salary', 'salary']
  keyArr.forEach(key => {
    document.querySelector(`[name=${key}]`).value = res.data[key]
  })
  const { gender, province, city, area } = res.data
  const chks = document.querySelectorAll('[name=gender]')
  chks[gender].checked = true
  proSelect.value = province
  const cityRes = await axios.get('/api/city', {
    params: {
      pname: province
    }
  })
  const cityHtml = cityRes.list.map(v => {
    return `<option value="${v}">${v}</option>`
  }).join('')
  citySelect.innerHTML = `<option value="">--城市--</option>${cityHtml}`
  citySelect.value = city
  const areaRes = await axios.get('/api/area', {
    params: {
      pname: province,
      cname: city
    }
  })
  const areaHtml = areaRes.list.map(v => {
    return `<option value="${v}">${v}</option>`
  }).join('')
  areaSelect.innerHTML = `<option value="">--地区--</option>${areaHtml}`
  areaSelect.value = area
  modal.show()
  modalDom.dataset.id = id
}

async function saveEdit() {
  const form = document.querySelector('#form')
  const data = serialize(form, { hash: true, empty: true })
  data.age = +data.age
  data.gender = +data.gender
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary
  data.group = +data.group
  try {
    const saveRes = await axios.put(`/students/${modalDom.dataset.id}`, data)
    showToast(saveRes.message)
    getData()
  } catch (error) {
    showToast(error.response.data.message)
  }
  modal.hide()
}
